<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backTo()"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">添加车辆</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" src="/static/bg05.png" mode="widthFix"></image>
			<view class="bg_content">
				
				<view class="details_box">
					<view class="standing">
						
						<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
							:maxCount="1" width="636rpx" height="414rpx">
							<image src="/static/car01.png" mode="" style="width: 636rpx; height: 414rpx;"></image>
						</u-upload>
						<!-- <image src="/static/car01.png" mode="widthFix"></image> -->
					</view>
					
					<view class="standing">
						<u-upload :fileList="fileList7" @afterRead="afterRead" @delete="deletePic" name="7" multiple
							:maxCount="1" width="636rpx" height="414rpx">
							<image src="/static/car02.png" mode="" style="width: 636rpx; height: 414rpx;"></image>
						</u-upload>
						<!-- <image src="/static/car02.png" mode="widthFix"></image> -->
					</view>
				</view>	
					
				<view class="details_box">
					<view class="details_title">车牌号码</view>
					<!-- 引用车牌组件 -->
					<view class="plate-box">
						<car-number-input @numberInputResult="numberInputResult" :defaultStr="car_num"></car-number-input>
					</view>
					<view class="list">
						<view class="name">品牌车型</view>
						<input type="text" v-model="car_model" placeholder="请输入品牌车型" />
					</view>
					<view class="list">
						<view class="name">车架号</view>
						<input type="text" v-model="vinstr" placeholder="请输入" />
					</view>
				<!-- 	<view class="list">
						<view class="name">租赁类型</view>
						<input type="text" value="" placeholder="请选择租赁类型" />
						<view class="arrow iconfont icon-xiangyou1"></view>
					</view> -->
					
					<view class="list">
						<view class="name">归属人</view>
						<input type="text" v-model="owner" placeholder="请输入归属人姓名" />
					</view>
					
					<view class="list">
						<view class="name">车辆类别</view>
						<input type="text" v-model="vtype" placeholder="请输入车辆类别" />
					</view>
					<view class="list">
						<view class="name">上牌时间</view>
						<input type="text" v-model="reg_time" placeholder="请输入上牌时间" />
					</view>
					
					<block v-if="has_info">
					<view class="list">
						<view class="name">品牌</view>
						<input type="text" v-model="car_info.brand_name" placeholder="请输入品牌名称" />
					</view>
					<view class="list">
						<view class="name">厂商</view>
						<input type="text" v-model="car_info.group_name" placeholder="请输入车型全称" />
					</view>
					<view class="list">
						<view class="name">车型全称</view>
						<input type="text" v-model="car_info.full_name" placeholder="请输入车型全称" />
					</view>
					<view class="list">
						<view class="name">车型简称</view>
						<input type="text" v-model="car_info.name" placeholder="请输入车型简称" />
					</view>
					<view class="list">
						<view class="name">模型名称</view>
						<input type="text" v-model="car_info.model_name" placeholder="请输入保证金" />
					</view>
					<view class="list">
						<view class="name">出厂年份</view>
						<input type="text" v-model="car_info.year" placeholder="请输入出厂年份" />
					</view>
					<view class="list">
						<view class="name">指导价</view>
						<input type="text" v-model="car_info.maxprice" placeholder="请输入指导价" />
					</view>

					</block>
					
				</view>
				<view class="clear_box04"></view>
				
				<view class="confirm" @click="to_pub()">确认添加</view>
				
			</view>
		</view>
		
		<u-modal :show="show" @confirm="model_com" :content="content" @close="model_act"></u-modal>
		 <helang-compress ref="helangCompress"></helang-compress>
		
	</view>
</template>

<script>
	import up_mixin from '@/lib/mixin/up_mixin.js';
	export default {
		mixins:[up_mixin],
		data() {
			return {
				fileList6: [],
				fileList7: [],
				scrrol:false,
				info:'',
				has_info : 0,
				vinstr : '',
				car_num:'闽A8107M',
				car_model : '',
				owner : '',
				vtype : '',
				reg_time : '',
				car_info:{
					brand_name : '',
					full_name : '',
					group_name: '',
					maxprice : '',
					minprice : '',
					brand_id : '',
					model_name: '',
					name : '',
					series_id : '',
					series_name : '',
					state : 0,
					year : '',	
				}
			
			}
		},
		onLoad() {

		},
		methods: {
			to_pub() {
				try {
					if(!this.hasLogin){
						throw "请先登录";
					}
					if(this.fileList6.length == 0){
						this.showMsg('请上传行驶证图片');
						return false;
					}
					if(this.fileList7.length == 0){
						this.showMsg('请上传绿本图片');
						return false;
					}
					if (this.vinstr == '') {
						this.showMsg('请输入车架号');
						return false;
					}
					if(!this.has_info){
						throw '车辆信息查询失败';
					}
					uni.$u.throttle(this.real_pub, 2500)
				} catch (err) {
					this.showMsg(err);
					return false;
				}
			},
			real_pub() {
				
				uni.showLoading({
					title: '正在上传中...',
					mask: true,
				});
				helper.Timer.start();
				let url = this.site_url + 'api/auth/index/loans_car_release';
				let blue_imgs = green_imgs = [];
				this.fileList6.map((v) => {
					blue_imgs.push(v.url);
				})
				this.fileList7.map((v) => {
					green_imgs.push(v.url);
				})
				let params = {
					vinstr : this.vinstr,
					car_info: JSON.stringify(this.car_info),
					car_num: this.car_num,
					car_model: this.car_model,
					owner: this.owner,
					vtype: this.vtype,
					reg_time : this.reg_time,
					blue_img: blue_imgs[0],
					green_imgs: green_imgs,
				};
				
				this.areq(url, params, 'POST').then(res => {
					helper.Timer.stop();
					let left_time = helper.Timer.getLeftTime(3000);
					// console.log(left_time);
					setTimeout(() => {
						uni.hideLoading();
						if (res.code == 1) {
							this.showMsg('上传成功', 2000, true, 'success');
							setTimeout(() => {
								this.backTo();
							}, 1200)
						} else {
							this.showMsg(res.msg);
						}
			
					}, left_time);
				});
				
			},
			numberInputResult(e){
				console.log('结果--'+e)
			},
			setRule(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			loadData() {
				let that = this;
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},

		},
		onPageScroll: function(Object) {
			if (Object.scrollTop > 28) {
				this.scrrol = true;
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
			
			}
		},
	
	}
</script>

<style>
	
	.header{
		background-color: transparent !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #FFE6D0 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.details_box {
		width: 100%;
		margin-top: 4%;
		background-color: #fff;
		padding: 5vw 4%;
		border-radius: 3vw;
	}
	
	.details_boxNo{
		padding: 0vw 4%;
	}
	
	.details_box .details_title {
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
		margin-bottom: 5vw;
	}
	
	.details_box .input_box{
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #FC5D20;
		height: 15vw;
	}
	
	.details_box .input_box .m{
		font-size: 4vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		margin-top: 2vw;
	}
	
	.details_box .input_box input{
		font-size: 7vw;
		color: #333;
		flex: 1;
		font-weight: bold;
	}
	
	.details_box .list {
		width: 100%;
		padding: 5vw 0;
		border-bottom: 1px solid #F3F3F3;
		display: flex;
		align-items: center;
	}
	
	.details_box .list .name {
		font-size: 4.2vw;
		font-weight: bold;
		color: #333;
		margin-right: 4vw;
	}
	
	.details_box .list .text {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	.details_box .list .text .i{
		width: 5vw;
		margin-right: 1vw;
	}
	
	.details_box .list .text .i image{
		width: 100%;
	}
	
	.details_box .list input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 3vw;
		text-align: right;
		font-weight: bold;
	}
	
	.details_box .list .arrow {
		font-size: 3.5vw;
		color: #333;
	}
	
	.standing{
		width: 100%;
	}
	
	.standing image{
		width: 100%;
	}
	
	.standing .text{
		width: 100%;
		font-size: 3.8vw;
		color: #333;
		font-weight: bold;
		margin-top: 3vw;
		text-align: center;
	}
	
	.details_box .standing:nth-child(2){
		margin-top: 5vw;
	}
	
	
	
	
</style>
